import { Popover, Typography } from "antd";
import { ReceiptTextIcon } from "lucide-react";
import { useDictMap } from "~/contexts/dict";
import type { IChannelMonthlyRevenue } from "~/types/manage/channel/coin";
import { amountToYuan } from "~/utils/ui.util";

interface Props {
  record: IChannelMonthlyRevenue;
  month: string;
}

export default function InvoiceInfo({ record, month }: Props) {
  const dictMap = useDictMap();

  return (
    <Popover
      content={
        <div className="flex flex-col gap-2 rounded bg-gray-100 p-2">
          <p>
            <span className="text-gray-400">企业渠道：</span>
            {record.name}
          </p>
          <p>
            <span className="text-gray-400">开票类型：</span>
            {dictMap[record.invoiceTypeDictCode.toString()]?.label}
          </p>
          <p>
            <span className="text-gray-400">税点：</span>
            {record.taxRate && record.taxRate + "%"}
          </p>
          <p>
            <span className="text-gray-400">名称：</span>
            {record.invoiceTitle}
          </p>
          <p>
            <span className="text-gray-400">税号：</span>
            {record.creditCode}
          </p>
          <p>
            <span className="text-gray-400">地址：</span>
            {record.companyAddress}
          </p>
          <p>
            <span className="text-gray-400">电话：</span>
            {record.companyPhone}
          </p>
          <p>
            <span className="text-gray-400">开户行：</span>
            {record.bankName}
          </p>
          <p>
            <span className="text-gray-400">账号：</span>
            {record.bankAccount}
          </p>
          <p>
            <span className="text-gray-400">发票类目：</span>
            {record.invoiceCategory}
          </p>
          <p>
            <span className="text-gray-400">文件格式：</span>
            {record.invoiceFileType}
          </p>
          <p>
            <span className="text-gray-400">开票金额：</span>
            {amountToYuan(record.revenues[month].amount)}
          </p>
          <p>
            <span className="text-gray-400">备注：</span>
            {record.revenues[month].remark}
          </p>
        </div>
      }
      title={
        <div className="flex w-full">
          <span className="flex-1">开票信息</span>
          <Typography.Text
            copyable={{
              text: `企业：${record.name}\n开票类型：${dictMap[record.invoiceTypeDictCode.toString()]?.label}\n税点：${record.taxRate && record.taxRate + "%"}\n名称：${record.invoiceTitle}\n税号：${record.creditCode}\n地址：${record.companyAddress || ""}\n电话：${record.companyPhone || ""}\n开户行：${record.bankName}\n账号：${record.bankAccount}\n发票类目：${record.invoiceCategory}\n文件格式：${record.invoiceFileType}\n\n开票金额：${amountToYuan(record.revenues[month].amount)}\n\n备注：${record.revenues[month].remark || ""}`,
            }}
          />
        </div>
      }
    >
      <div className="cursor-pointer text-gray-400 hover:text-blue-500">
        <ReceiptTextIcon size={18} />
      </div>
    </Popover>
  );
}
